﻿@model DingTalkAgent.Model.PatrolLog
@{
    ViewBag.Title = "河长巡河";
    Layout = "~/Areas/mobile/Views/Shared/_Layout.cshtml";
}
<script src="http://webapi.amap.com/maps?v=1.4.4&key=您申请的key值"></script>
<style>
    .footer-tab {
        height: 40px;
        position: fixed;
        bottom: 0px;
    }

    #divimg img {
        width: 60px;
        height: 60px;
        margin: 3px;
        display: inline-block;
    }
    .dd-f-w{ display: flex; justify-content: flex-start; flex-wrap: wrap;align-items: flex-start;}
   .dd-icon-addpictures:before{position: absolute; font-size: 3.8em; color: #353535;margin: 3px;top:0;}
   .imgadd,.dd-icon-addpictures{position: relative; width: 60px;height: 60px;}
</style>

<div class="container">
    <div class="dd-container bt50">

        @*<div class="dd-box header-bar m-b11">
            <h4 class="name m-l20"><i class="icon iconfont icon-yonghutouxiang dd-i-yhphoto"></i>@Model.userName</h4>
        </div>*@
        @using (Html.BeginForm())
        {
            <div class="dd-box dd-top-line m-b11">
                <h4 class="riverLeader-river-item dd-f dd-tit-bottom-line h50">
                    <span class="dd-item-tit left-line fw">请填写巡河详情</span>
                    <span style="margin-right:15px;">
                        <i class="icon iconfont icon-yonghutouxiang dd-i-yhphoto" ></i>@Model.userName
                    </span>
                </h4>

                <div class="riverLeader-river-item dd-f dd-bottom-line h50">
                    <span class="dd-item-tit w120">巡河时间</span>
                    <label class="dd-item-ft p-r15">@Model.CreateTime.ToString("yyyy-MM-dd H:mm")</label>
                </div>

                <div class="riverLeader-river-item dd-bottom-line">
                    <div class="dd-f h50">
                        <span class="dd-item-tit w120">实时位置</span>
                        <label class="dd-item-ft p-r15">
                            <span id="spanaddress">

                            </span>@Html.Hidden("longitude")
                            @Html.Hidden("latitude")
                            @Html.Hidden("address")
                        </label>
                    </div>
                    <div class="time-map p-r15 p-l15 p-ddt15" style="padding-top:0px">
                        <div id="map" style="width:100%; height:150px;">

                        </div>
                    </div>
                </div>
                <div class="riverLeader-river-item dd-bottom-line h50 dd-f">
                    <span class="dd-item-tit w120">河源类型</span>
                    <div class="dd-item-ft p-r15">
                        <div class="dd-select-out">
                            <span class="dd-select-hide"></span>
                            @Html.DropDownList("riverSourceType", @Model.ListMyRSourceType, new { @class = "dd-item-select" })
                        </div>
                    </div>
                </div>
                <div class="riverLeader-river-item dd-bottom-line h50 dd-f">
                    <span class="dd-item-tit w120">巡查河流</span>
                    <div class="dd-item-ft p-r15">
                        <div class="dd-select-out">
                            <span class="dd-select-hide"></span>
                            <span id="spanleveCode">@Html.DropDownList("leveCode", @Model.ListleveCodeList, new { @class = "dd-item-select" })</span>
                        </div>
                    </div>
                </div>
                <div class="riverLeader-river-item dd-bottom-line h50 dd-f">
                    <span class="dd-item-tit w120">是否违规</span>
                    <div class="weui_cell_ft dd-item-ft p-r15">
                        <input type="checkbox" id="isIllegal" name="isIllegal" value="1" class="weui_switch dd-switch" />

                    </div>
                </div>
                <div class="riverLeader-river-item dd-bottom-line h50 dd-f" style="display:none" id="divIllegalType">
                    <span class="dd-item-tit w120">违规类型</span>
                    <div class="dd-item-ft p-r15">
                        <div class="dd-select-out">
                            <span class="dd-select-hide"></span>
                            <span id="spanleveCode">@Html.DropDownList("IllegalType", @Model.ListIllegalType, new { @class = "dd-item-select" })</span>
                        </div>
                    </div>
                </div>


                <div class="riverLeader-river-item dd-bottom-line p-ddt15">
                    <span class="dd-item-tit w120">备注说明</span>
                    <div class="dd-item-textarea">

                        <textarea class="" name="remark" id="remark" placeholder="请输入备注说明"></textarea>
                    </div>
                </div>



                <div class="riverLeader-river-item dd-bottom-line p-ddt15">
                    <span class="dd-item-tit w120">图片</span>
              
                        <div id="divimg"  class="dd-f-w p-r15 p-l15">
                            @*<img class="show"  src="http://static.dingtalk.com/media/lADPBbCc1X9IJyfNAyrNAhw_540_810.jpg,http://static.dingtalk.com/media/lADPBbCc1X9IJw_NAyrNAhw_540_810.jpg"/>
                            <img class="show" src="http://static.dingtalk.com/media/lADPBbCc1X9IJyfNAyrNAhw_540_810.jpg,http://static.dingtalk.com/media/lADPBbCc1X9IJw_NAyrNAhw_540_810.jpg" />
                            <img class="show" src="http://static.dingtalk.com/media/lADPBbCc1X9IJyfNAyrNAhw_540_810.jpg,http://static.dingtalk.com/media/lADPBbCc1X9IJw_NAyrNAhw_540_810.jpg" />*@
                   
                            <div class="imgadd" ><i class="icon iconfont icon-addpictures dd-icon-addpictures"></i></div>
                        </div>
                        @Html.Hidden("imgArr")
                   
                </div>

                <div class="form-btn-bar dd-f p-r15 p-l15 p-ddt15">
                    <input type="button" value="提交" class="form-btn ww100 blue-btn" id="submit">
                </div>
            </div>

        }
    </div>
</div>

<div class="footer-menu-bar dd-menu-bar dd-top-line">
    <a href="/mobile/patrolLog/index" class="footer-menu active-footer-tab"><i class="icon iconfont icon-shuilishehuituanti dd-i-f-hzxh"></i><span>河长巡河</span></a>
    <a href="/mobile/patrolLog/list" class="footer-menu"><i class="icon iconfont icon-kaoshi1 dd-i-f-lsjl"></i><span class="lsjl-span">历史记录</span></a>
</div>



<script>

</script>
<script>

    $(function () {
        $.post("/mobile/login/init", "url=@ViewBag.url&CorpID=ss", function (_config) {
            dd.config({
                agentId: _config.agentId,
                corpId: _config.corpId,
                timeStamp: _config.timeStamp,
                nonceStr: _config.nonceStr,
                signature: _config.signature,
                jsApiList: ['runtime.info', 'device.notification.prompt', 'biz.chat.pickConversation', 'device.notification.confirm',
           'device.notification.alert',
           'device.notification.prompt',
           'biz.chat.open',
           'biz.util.open', 'device.geolocation.get', 'biz.map.locate', 'biz.map.view', 'biz.util.uploadImageFromCamera',
           'biz.user.get',
           'biz.contact.choose',
           'biz.telephone.call',
           'biz.ding.post']
            });

            dd.ui.pullToRefresh.disable();
            dd.ready(function () {
                dd.biz.navigation.setTitle({
                    title: '河长巡河',
                    onSuccess: function (data) {
                    },
                    onFail: function (err) {
                        log.e(JSON.stringify(err));
                    }
                });
                //	 alert('dd.ready rocks!');

                dd.runtime.info({
                    onSuccess: function (info) {
                        console.log('runtime info: ' + JSON.stringify(info));
                    },
                    onFail: function (err) {
                        console.log('fail: ' + JSON.stringify(err));
                    }
                });
                dd.ui.pullToRefresh.enable({
                    onSuccess: function () {
                    },
                    onFail: function () {
                    }
                });
                dd.device.notification.showPreloader({
                    text: "位置信息获取中..", //loading显示的字符，空表示不显示文字
                    showIcon: true, //是否显示icon，默认true
                    onSuccess: function (result) {
                        /*{}*/
                    },
                    onFail: function (err) { }
                })
                dd.device.geolocation.get({
                    targetAccuracy: 200,
                    coordinate: 1,
                    withReGeocode: true,
                    useCache: true, //默认是true，如果需要频繁获取地理位置，请设置false
                    onSuccess: function (result) {
                        dd.device.notification.hidePreloader({
                            onSuccess: function (result) {
                                /*{}*/
                            },
                            onFail: function (err) { }
                        })

                        $("#address").val(result.address);
                        $("#spanaddress").html(result.address);
                        $("#longitude").val(result.longitude);
                        $("#latitude").val(result.latitude);
                        _stickers.address = result.address;

                        var map = new AMap.Map('map', {
                            resizeEnable: true,
                            zoom: 13,
                            center: [result.longitude, result.latitude]
                        });
                        marker = new AMap.Marker({
                            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                            position: [result.longitude, result.latitude]
                        });
                        marker.setMap(map);
                        //alert(JSON.stringify(result));
                        /*
                        dd.biz.map.view({
                            latitude: result.latitude, // 纬度
                            longitude: result.longitude, // 经度
                            title: result.district // 地址/POI名称
                        });
                        */
                        /* 高德坐标 result 结构
                        {
                            longitude : Number,
                            latitude : Number,
                            accuracy : Number,
                            address : String,
                            province : String,
                            city : String,
                            district : String,
                            road : String,
                            netType : String,
                            operatorType : String,
                            errorMessage : String,
                            errorCode : Number,
                            isWifiEnabled : Boolean,
                            isGpsEnabled : Boolean,
                            isFromMock : Boolean,
                            provider : wifi|lbs|gps,
                            accuracy : Number,
                            isMobileEnabled : Boolean
                        }
                        */
                    },
                    onFail: function (err) {
                        alert('err');
                    }
                });
            });



            dd.error(function (err) {
                alert('dd error: ' + JSON.stringify(err));
            });

        })
        var _stickers = { time: '@Model.CreateTime.ToString("H:mm")', dateWeather: '@Model.CreateTime.ToString("yyyy-MM-dd")', username: '@Model.userName' + ".河长", address: "" };

        $(".imgadd").click(function () {
            //var t = setTimeout("alert('10秒！')", 10000)
            dd.biz.util.uploadImageFromCamera({
                compression: true,//(是否压缩，默认为true)
                quality: 50, // 图片压缩质量,
                resize: 50, // 图片缩放率
                stickers: _stickers,
                onSuccess: function (result) {
                    $("#divimg").prepend($("<img>").attr("src", result[0]).addClass("show"));
                    urls.push(result[0]);
                    //onSuccess将在图片上传成功之后调用
                    /*
                    [
                      'http://gtms03.alicdn.com/tps/i3/TB1VF6uGFXXXXalaXXXmh5R_VXX-237-236.png'
                    ]
                    */
                },
                onFail: function (err) { }
            });
        });
        var urls = new Array();
        $("#divimg").on('click', '.show', function () {


            dd.biz.util.previewImage({
                urls: urls,//图片地址列表
                current: $(this).attr("src"),//当前显示的图片链接
                onSuccess: function (result) {

                },
                onFail: function (err) { }
            })

        });

        //违规切换
        $("#isIllegal").change(function () {
            // alert($("#isIllegal:checked").length);
            if ($("#isIllegal:checked").length > 0) {
                $("#divIllegalType").show();
            }
            else {
                $("#divIllegalType").hide();
            }
        });

        $("#riverSourceType").change(function () {
            $.ajax({
                type: "POST",
                url: "getleveCodeList",
                data: "riverSourceType=" + $(this).val(),
                success: function (msg) {
                    $("#spanleveCode").html(msg);
                }
            });

        });

        $("#submit").click(function () {
            dd.device.notification.confirm({
                message: "确认提交吗？",
                title: "提示",
                buttonLabels: ['确认', '取消'],
                onSuccess: function (result) {
                    dd.device.notification.showPreloader({
                        text: "数据提交中..", //loading显示的字符，空表示不显示文字
                        showIcon: true, //是否显示icon，默认true
                        onSuccess: function (result) {
                            /*{}*/
                        },
                        onFail: function (err) { }
                    });
                    //汇总图片
                    var _imgArr = "";
                    $("#divimg .show").each(function () {
                        _imgArr = _imgArr + $(this).attr("src") + ",";
                    }); //
                    $("#imgArr").val(_imgArr)
                    $.ajax({
                        type: "POST",
                        url: "index",
                        data: $("form").serialize(),
                        success: function (msg) {

                            dd.device.notification.hidePreloader({
                                onSuccess: function (result) {
                                    /*{}*/
                                },
                                onFail: function (err) { }
                            })
                            if (msg == "true") {
                                //跳转到历史查看
                                window.location.href = "list";
                            }
                            else {
                                dd.device.notification.alert({
                                    message: msg,
                                    title: "提示",//可传空
                                    buttonName: "知道了",
                                    onSuccess: function () {
                                        //onSuccess将在点击button之后回调
                                        /*回调*/
                                    },
                                    onFail: function (err) { }
                                });
                            }

                        }
                    });
                    //onSuccess将在点击button之后回调
                    /*
                    {
                        buttonIndex: 0 //被点击按钮的索引值，Number类型，从0开始
                    }
                    */
                },
                onFail: function (err) { }
            });
        })
    })



</script>


<script type="text/javascript">
    $(document).ready(function () {
        $("#tab1").show();
        $("#tab2").hide();
        $(".footer-menu").click(function () {
            $(".footer-menu").removeClass("active-footer-tab");
            $(this).addClass("active-footer-tab");
        });
        $(".dd-menu").click(function () {
            $(".dd-menu").removeClass("active-tab-menu");
            $(this).addClass("active-tab-menu");
        });
        $(".dd-sub-menu").click(function () {
            $(".dd-sub-menu").removeClass("active-sub-tab-menu");
            $(this).addClass("active-sub-tab-menu");
        });
    })
    function tabchage(_id) {
        $(".dd-tab").hide();
        $(_id).show();
    }
    function tabchage1(_id) {
        $(".dd-sub-tab").hide();
        $(_id).show();
    }
    function tabchage2(_id) {
        $(".dd-sub-sub-tab").hide();
        $(_id).show();
    }
</script>
